<template>
<div>
  <el-form size="small" label-width="90px">
    <el-form-item label="接口名称">
      <div style="display:flex">
        <el-select v-model="keyValue" filterable placeholder="请选择"   @change="setInterfaceKey">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
            </el-option>
        </el-select>
        <el-button type="primary" @click="addWS" style="margin-left:10px">新建</el-button>
      </div>
    </el-form-item>
    <el-form-item label="key值">
      <span style="word-wrap: break-word;"> {{keyValue}}</span>
      <el-button type="primary" @click="docopy(keyValue)" style="margin-left:10px" v-show="keyValue !== undefined">复制key</el-button>
    </el-form-item>
    
  </el-form>
   <!-- 添加或修改websocket通讯接口管理对话框 -->
    <el-dialog title="添加websocket通讯接口" :visible.sync="wsOpen" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="interfaceName">
          <el-input v-model="form.interfaceName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="接口地址" prop="interfaceUrl">
          <el-input v-model="form.interfaceUrl" placeholder="请输入接口地址" />
        </el-form-item>
        <el-form-item label="token令牌">
          <el-input v-model="form.token" placeholder="请输入token令牌" />
        </el-form-item>
        <!-- <el-form-item label="键" prop="interfaceKey">
          <el-input v-model="form.interfaceKey" placeholder="请输入键" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    
</div>
</template>

<script>
import { listSysWebsocket,addSysWebsocket} from "@/api/tool/SysWebsocket";
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

export default {
    props: ["interfaceKey"],
    created(){
        this.getOptions();
    },  
    data(){
      return{
        keyValue:this.interfaceKey,
        //选择框数据源
        options:[], 
        //添加websocket接口弹出框
        wsOpen:false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    watch:{
        interfaceKey:{
            deep: true,
            handler(newVal){
                this.keyValue = newVal;
            }
        }
    },
    methods:{
        //获取websocket接口数据遍历创建options
        getOptions(){
            this.options = [];
            listSysWebsocket().then(response => {
                for(let res of response.rows){
                    this.options.push({
                        label:res.interfaceName,
                        value:res.interfaceKey
                    })
                }
            })
        },
        //传选中的websocket的key
        setInterfaceKey(){
            this.$emit("getInterfaceKey",this.keyValue); 
        },
        //添加websocket接口
        addWS(){
            this.wsOpen = true;
        },
        // 取消按钮
        cancel() {
            this.wsOpen = false;
            // this.reset();
        },
        //重置form
        reset(){
            this.form = {};
        },
        /** 提交按钮 */
        submitForm: function() {
        this.$refs["form"].validate(valid => {
            if (valid) {
                addSysWebsocket(this.form).then(response => {
                if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.wsOpen = false;
                    this.getOptions();
                } else {
                    this.msgError(response.msg);
                }
                });
                }
            });
        },
        //复制key的方法
        docopy(text){
          this.$copyText(text).then(msg => {
            // console.log("1",msg)
            this.msgSuccess('复制成功')
          }).catch(err =>{
            console.log("copy.err",err)
            this.msgError('复制失败')
          })
        },
    }
}
</script>

<style lang="scss" scoped>

</style>